<!--
 - Author : zhuyq.
 - Date   : 2018/5/18.
 - File   : sidebar/通用侧边栏.
 -->

<template>
  <div class="sidebar">
    <el-menu
      :default-active="my_index"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      :collapse-transition="false"
      active-text-color="#ffd04b">
      <el-menu-item index="0" @click="turnToLink('/integralFood')">
        <i class="el-icon-menu"></i>
        <span slot="title">积分美食</span>
      </el-menu-item>
      <el-menu-item index="1" @click="turnToLink('/consignRecord')">
        <i class="el-icon-document"></i>
        <span slot="title">积分活动</span>
      </el-menu-item>
      <el-menu-item index="2" @click="turnToLink('/order')">
        <i class="el-icon-setting"></i>
        <span slot="title">美食券</span>
      </el-menu-item>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>银行美食券</span>
        </template>
        <el-menu-item index="3-1" @click="turnToLink('/lockerAdmin')">寄存柜管理员</el-menu-item>
        <el-menu-item index="3-2" @click="turnToLink('/adminAuthority')">管理员权限</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>系统管理</span>
        </template>
        <el-menu-item index="4-1" @click="turnToLink('/admin')">后台管理员</el-menu-item>
        <el-menu-item index="4-2" @click="turnToLink('/roleAuthority')">角色权限</el-menu-item>
        <el-menu-item index="4-3" @click="turnToLink('/modifPwd')">修改密码</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    turnToLink (url) {
      this.$router.push(url)
    }
  },
  props: {
    my_index: {
      type: String,
      default: '0'
    }
  }
}
</script>

<style lang="less">
.sidebar {
  position: fixed;
  z-index: 1000;
  top: 70px;
  bottom: 0;
  left: 0;
  display: block;
  width: 200px;
  padding: 0;
  background-color: #344c67;
}

.sidebar-scroll {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 200px;
  height: 100%;
  overflow: auto;
}

.el-menu {
  background: #324157;
  border-right: solid 1px #344c67;
  > .el-menu-item {
      padding: 0 45px!important;
      text-align: left;
      color: #bfcbd9;
    }
}
.el-menu--inline {
  > .el-menu-item {
    padding-left: 75px!important;
  }
}

.el-submenu {
  .el-submenu__title {
    padding: 0 45px!important;
    text-align: left;
  }
}

.el-menu-item:hover {
  background: #48576a;
}

.loginout-main {
  bottom: 0;
  position: absolute;
  list-style: none;
  padding: 15px 0;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 16px;
  background: #446182;
}

.loginout-main:hover {
  background: #37b0eb;
  cursor: pointer;
}

.loginout-main a {
  color: #ffffff;
}

.loginout-main a:hover {
  opacity: 0.9;
  text-decoration: none;
  color: #fff;
}

.loginout-icon {
  display: inline-block;
  vertical-align: sub;
  width: 20px;
  height: 20px;
  background: url("../../static/login_out.png") 0 0 no-repeat;
  background-size: 100%;
  margin-right: 5px;
}
</style>
